<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>08视频加载到canvas</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				overflow: hidden;
			}
			#firCan {
				display: block;
				border: 1px solid khaki;
				margin: 20px auto;
			}
			#oneVid {
				display: none;
			}
		</style>
	</head>
	<body>
		<video src="video/level.mp4" id="oneVid"></video>
		<canvas id="firCan" width="1000" height="625">
			您的浏览器版本过低, 不支持Canvas, 请升级!
		</canvas>
		<div style="text-align: center;">
			<input type="button" id="playBtn" value="播放" />
			<input type="button" id="pauseBtn" value="暂停" />
		</div>
	</body>
	<script type="text/javascript">
		// 1, 获取Canvas
		var firCan = document.getElementById("firCan");
		// 2, 获取 2d渲染上下文
		var context = firCan.getContext('2d');
		// 3, 加载视频
		// 播放按钮
		var playBtn = document.getElementById("playBtn");
		// 音频文件
		var oneVid = document.getElementById("oneVid");
		// 视频加载完毕, 可以播放时触发
		oneVid.oncanplay = function() {
			// 播放按钮关联点击事件
			playBtn.onclick = function() {
				// 播放
				oneVid.play();// 听到声音
				
				// 显示图像
				// 方式一
//				setInterval(function() {
//					context.clearRect(0, 0, firCan.width, firCan.height);
//					context.drawImage(oneVid, 0, 0, firCan.width, firCan.height);
//				}, 1);
				
				// 方式二
				videoAnimate();
			}
		}
		
		function videoAnimate() {
			context.clearRect(0, 0, firCan.width, firCan.height);
			context.drawImage(oneVid, 0, 0, firCan.width, firCan.height);
			// 根据浏览器的刷帧频率来调用对应的方法
			window.requestAnimationFrame(videoAnimate);
		}
		
	</script>
</html>
